<template>
  <div>
    <el-card>
      <div class="date-selection">
        <el-button
          :class="{ 'selected-button': selectedTime === '昨日' }"
          @click="loadData('yesterday')"
        >
          昨日
        </el-button>
        <el-button
          :class="{ 'selected-button': selectedTime === '近7日' }"
          @click="loadData('lastWeek')"
        >
          近7日
        </el-button>
        <el-button
          :class="{ 'selected-button': selectedTime === '近30日' }"
          @click="loadData('lastMonth')"
        >
          近30日
        </el-button>
        <span class="selection-gap" /> <!-- 添加间隔 -->
        <span class="selected-time">已选时间: {{ selectedTime }}</span>
      </div>
    </el-card>
    <div class="Echarts">
      <el-card>
        <div class="chart-container">
          <div id="book" class="chart" style="width: 620px;height: 450px;" />
          <div id="user" class="chart" style="width: 620px;height: 450px;" />
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import chartsApi from '@/api/charts'

export default {
  name: 'Echarts',
  data() {
    return {
      selectedTime: '',
      bookSaleTop: [],
      userStatistics: []
    }
  },
  created() {
    this.selectedTime = this.getTime(1)
    this.getBookSalesStatistics(this.selectedTime)
    this.getUserStatistics(this.selectedTime)
  },
  methods: {
    // 格式化时间
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0') // 将月份转为两位数字，不足两位前面补0
      const day = String(date.getDate()).padStart(2, '0') // 将日期转为两位数字，不足两位前面补0
      return `${year}-${month}-${day}`
    },

    // 获取时间
    getTime(days) {
      const endDate = new Date()
      const startDate = new Date(endDate)
      startDate.setDate(endDate.getDate() - days)
      return this.formatDate(startDate) + '至' + this.formatDate(endDate)
    },

    // 发送书籍销量请求
    getBookSalesStatistics(selectedTime) {
      const time = selectedTime.split('至')
      chartsApi.getBookSalesStatistics(time[0], time[1]).then(response => {
        this.bookSaleTop = response.data
      }).catch(() => {

      })
    },

    // 发送用户统计请求
    getUserStatistics(selectedTime) {
      const time = selectedTime.split('至')
      chartsApi.getUserStatistics(time[0], time[1]).then(response => {
        this.userStatistics = response.data
      }).catch(() => {

      })
    },

    // 加载数据
    loadData(timeframe) {
      if (timeframe === 'yesterday') {
        this.selectedTime = this.getTime(1)
        this.getBookSalesStatistics(this.selectedTime)
        this.getUserStatistics(this.selectedTime)
      } else if (timeframe === 'lastWeek') {
        this.selectedTime = this.getTime(7)
        this.getBookSalesStatistics(this.selectedTime)
        this.getUserStatistics(this.selectedTime)
      } else if (timeframe === 'lastMonth') {
        this.selectedTime = this.getTime(30)
        this.getBookSalesStatistics(this.selectedTime)
        this.getUserStatistics(this.selectedTime)
      }
      // 更新图表
      this.bookListTop10()
      this.userList()
    },
    // 其他方法...
    bookListTop10() {
      const myChart = echarts.init(document.getElementById('book'))
      // 配置图表
      const option = {
        title: {
          text: '书籍销量统计'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        yAxis: {
          type: 'category', // 将Y轴类型设置为category'
          data: this.bookSaleTop.map(item => item.name)
        },
        xAxis: { // 使用X轴显示销量
          type: 'value'
        },
        series: [{
          name: '销量',
          type: 'bar', // 使用横向柱状图
          data: this.bookSaleTop.map(item => item.value),
          itemStyle: { // 自定义柱形样式
            color: '#f6da93'// 设置柱形的颜色
          },
          barWidth: 30
        }]
      }
      myChart.setOption(option)
    },

    userList() {
      const myChart = echarts.init(document.getElementById('user'))
      // 配置图表
      const option = {
        title: {
          text: '用户统计'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: this.userStatistics.map(item => item.name)
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'line',
          data: this.userStatistics.map(item => item.value),
          itemStyle: { // 自定义柱形样式
            color: '#f6da93'// 设置柱形的颜色
          }
        }]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style>
.Echarts {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.chart-container {
  display: flex;
  justify-content: space-between;
  width: 100%; /* 卡片宽度 */
}

.chart {
  width: 48%; /* 图表容器的宽度，根据需要调整 */
  height: 450px;
}

.selection-gap {
  margin-left: 20px; /* 根据需要调整间隔的大小 */
}

.selected-button {
  background-color: #f6da93; /* 选中状态的背景色，根据需要自定义 */
  color: #fff; /* 选中状态的文字颜色，根据需要自定义 */
}
</style>
